<template>
  <div v-show="hide" class="move-button" ref="moveBtn"
       @mousedown="btnDown"
       @touchstart="btnDown"
       @mousemove="btnMove"
       @touchmove="btnMove"
       @mouseup="btnEnd"
       @touchend="btnEnd"
       @touchcancel="btnEnd">
    <div class="button-mainbg" :class="isopBg?'opBg':''" @click="toBack">
	     <img src="@/assets/img/index/back_w.png" alt="">
    </div>
    </div>
</template>

<script>
export default {
    name: 'MoveButton',
    props: {
    	isIndex: {
    		default:false ,
    	},
		isopBg: {
			default:false ,
		},
		isBackList: {
			default:false ,
		},
    },
    data() {
        return {
            hide: true,
//             img: require('@/assets/img/moveButton.png'),
            flags: false,
            position: {
                x: 0,
                y: 0
            },
            nx: '',
            ny: '',
            dx: '',
            dy: '',
            xPum: '',
            yPum: '',
            isShow: false,
            moveBtn: {},
            timer: null,
            currentTop:0
        }
    },
    mounted() {
        this.moveBtn = this.$refs.moveBtn;
        window.addEventListener('scroll', this.hideButton);
    },
    beforeDestroy() {
        window.addEventListener('scroll', this.hideButton);
    },
    methods: {
		toBack() {
			console.log("返回")
			if(this.isBackList==true){
			   this.$emit('toBacks')	
			   return	
			}
			if(this.isIndex==true){
				this.$router.push({path:'/'})
				return false
			}
			if (window.history.length <= 1) {
				this.$router.push({path:'/'})
				return false
			} else {
				this.$router.go(-1)
			}
		},
        hideButton() {
//             this.timer&&clearTimeout(this.timer);
//             this.timer = setTimeout(()=>{
//              this.handleScrollEnd();
//             },300);
//             this.currentTop = document.documentElement.scrollTop || document.body.scrollTop;
//             this.hide = false;
        },
        handleScrollEnd(){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop === this.currentTop){
            this.hide = true;
            clearTimeout(this.timer);
            }
        },

        // 实现移动端拖拽
      btnDown() {
            this.flags = true;
            let touch;
            if (event.touches) {
                touch = event.touches[0];
            } else {
                touch = event;
            }
            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            this.dx = this.moveBtn.offsetLeft;
            this.dy = this.moveBtn.offsetTop;
        },
      btnMove() {
            if (this.flags) {
                let touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                this.nx = touch.clientX - this.position.x;
                this.ny = touch.clientY - this.position.y;
                this.xPum = this.dx + this.nx;
                this.yPum = this.dy + this.ny;
                let clientWidth = document.documentElement.clientWidth;
              let clientHeight = document.documentElement.clientHeight;
                if (this.xPum > 0 && this.xPum < (clientWidth - this.moveBtn.offsetWidth)) {
                    this.moveBtn.style.left = this.xPum + "px";
                }
                if (this.yPum > 0 && this.yPum < (clientHeight - this.moveBtn.offsetHeight)) {
                    this.moveBtn.style.top = this.yPum + "px";
                }

                //阻止页面的滑动默认事件
                document.addEventListener("touchmove", this.handler, {
                    passive: false
                });
            }
        },
        //鼠标释放时候的函数
        btnEnd() {
            this.flags = false;
            document.addEventListener('touchmove', this.handler, {
                passive: false
            });
        },
        handler(e) {
            if(this.flags){
                event.preventDefault();
            }else{
                return true
            }
        }
    }
}
</script>

<style lang="less" scoped>
.move-button{
	width: 60px;
	height: 60px;
	background-color:transparent;
	border-radius: 50%;
	position: fixed;
	z-index: 10;
	bottom:25vh; 
	right: 15px;
}
.button-mainbg{
	position: relative;
	padding: 0px 0 0 0px;
	width: 60px;
	height: 60px;
	z-index: 9;
	border-radius: 50%;
	background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	img {
		width:32px;
		height: 32px;
		display: block;
	}
}
.opBg{
	background: linear-gradient(90deg, rgba(92, 210, 163, 0.7) 0%,rgba(62, 198, 217, 0.7) 100%);
	
}
</style>